<template>
    <a-slider 
        style="width:50%"
        :marks="marks" 
        :range="false"
        :step="null" 
        :tooltipVisible="false"
        v-model="sliderValue"
        @change="changeAuth"
    />
</template>
<script>
import {getRoleListApi} from "@/request/api"
export default {
    name:'eSlider',
    props:{
        defaultAuthValue:[String,Number]
    },
    created(){
        //this.sliderValue=this.defaultAuthValue
        if(this.defaultAuthValue=='5'){
            this.sliderValue=33
        }else if(this.defaultAuthValue=='4,5'){
            this.sliderValue=66
        }else if(!this.defaultAuthValue){
            this.sliderValue=0
        }else{
            this.sliderValue=100
        }
        this.init()
    },
    data(){
        return{
            sliderValue:33,
            marks: {
                0:'',
                33: 'VIP会员',
                66: '普通会员',
                100:{
                    style:{width:"100px"},
                    label:'注册用户'
                },
            },
        }
    },
    methods:{
        init(){
            this.getToken(getRoleListApi,{},res=>{
                this.allplainOptions=res.data
            })
        },
        changeAuth(data){
            this.sliderValue=data
            let selectAuth
            if(data==33){
                selectAuth=this.allplainOptions[2]
            }else if(data==66){
                selectAuth=this.allplainOptions[1]
            }else if(data==100){
                selectAuth=this.allplainOptions[0]
            }else{
                selectAuth=undefined
            }
            this.$emit('changeAuth',selectAuth?selectAuth.children:undefined)
        }
    }
}
</script>